<template>
  <div id="app">
    <h1>ToDoincomplete</h1>
    <div class="box">
      <input
        type="text"
        class="input"
        placeholder="输入今日目标吧😊"
        v-model="msg"
        @keyup.enter="handleEnter(msg)"
      />
      <div v-if="incomplete.length" class="incomplete">
        <h3>未完成--{{ incomplete.length }}</h3>
        <ul v-for="(item, index) of incomplete" :key="item">
          <li>
            <input type="checkbox" @click="handleClick(index, 'incomplete')" />
            {{ item }}
            <button @click="handleDe(index, 'incomplete')">删除</button>
          </li>
        </ul>
      </div>
      <div v-if="complete.length" class="complete">
        <h3>已完成--{{ complete.length }}</h3>
        <ul v-for="(item, index) of complete" :key="item">
          <li>
            <input type="checkbox" @click="handleClick(index)" checked />
            {{ item }}
            <button @click="handleDe(index)">删除</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "",
      incomplete: JSON.parse(localStorage.getItem("incomplete")) || [],
      complete: JSON.parse(localStorage.getItem("complete")) || []
    };
  },
  methods: {
    handleEnter(msg) {
      if (!this.incomplete.includes(msg) && !this.complete.includes(msg)) {
        this.incomplete.push(this.msg);
        this.msg = "";
      } else {
        alert("已经在今日行程中了哟💖");
        this.msg = "";
      }
    },
    handleClick(index, val) {
      if (val) {
        this.complete.push(...this.incomplete.splice(index, 1));
      } else {
        this.incomplete.push(...this.complete.splice(index, 1));
      }
    },

    handleDe(index, val) {
      if (val) {
        this.incomplete.splice(index, 1);
      } else {
        this.complete.splice(index, 1);
      }
    },
  },
  watch: {
    incomplete() {
      localStorage.setItem("incomplete", JSON.stringify(this.incomplete));
    },
    complete() {
      localStorage.setItem("complete", JSON.stringify(this.complete));
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
}
li {
  position: relative;
}
button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
  color: #fff;
}
h1 {
  text-align: center;
}
.input {
  width: 600px;
  height: 50px;
  padding-left: 20px;
  display: block;
  margin: auto;
}
#app {
  width: 750px;
  margin: auto;
}
.box {
  width: 100%;
}
</style>
